<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/小天使.png" alt="">
    <button>点击停止定时器</button>
    <script>
        // window.setTimeout(调用函数,[延迟时间])
        // 1.window 在调用的时候可以省略
        // 2. 延迟时间单位是毫秒 可以省略 默认是毫秒 毫秒数省略默认为 0
        // 3. 这个调用函数可以直接写函数,也可以写函数名 或者 '函数名()'
        // 4. 页面中可能有很多的定时器,我们经常给定时器加标识符(名字)
        // 区别: 延迟时间到了就调用回调函数 只调用一次
        setTimeout(function() {
            console.log('时间到了');
        }, 2000)
        setTimeout(callback,2000)
        setTimeout('callback()',2000) // 不提倡

        function callback() {
            console.log('爆炸了');
        }
        var timer1 = setTimeout(callback,3000)
        var timer2 = setTimeout(callback,5000)

        // 5秒自动关闭广告
        var pic = document.querySelector('img')
        setTimeout(function() {
            pic.style.display = 'none'
        }, 5000)


        // 停止 setTimeout()定时器:clearTimeout
        var btn =document.querySelector('button')
        var timer3 = setTimeout(function() {
            console.log('还没停止');
        },5000)
        btn.addEventListener('click',function() {
            clearTimeout(timer3)
        })


        // 2. 定时器2 setInterval() window.setInterval(回调函数,[间隔的毫秒数])
        setInterval(function() {
            console.log('继续输出永不停止');
        },1000)
        // 区别 每隔延迟时间就去调用这个回调函数,重复调用函数

        // 停止setInterval() clearInterval()

    </script>
</body>
</html>